<template>
    <section class="viewArea"> 
        <div class="containHead">带宽</div>
        <section class="mainContainer">
            <div class="clearfix">  
                <label class="filter-item" for="">
                    <span>客户：</span>
                    <Select filterable v-model="filters.customer_id" placeholder="请选择" style="width: 150px;">
                        <Option v-for="(item,index) in allCustomers" :value="item.customer_id" :key="index">{{item.customer_mark}}</Option>
                    </Select>
                </label>
                <label class="filter-item" for="">
                    <span>服务类型：</span> 
                    <Select filterable multiple v-model="filters.service" placeholder="请选择" style="width: 150px;">
                        <Option v-for="(item,index) in serviceOptions" :value="item.value" :key="index">{{item.label}}</Option>
                    </Select> 
                </label>
                <label class="filter-item" for="">
                    <span>域名：</span>
                    <Select filterable v-model="filters.domain_id" placeholder="请选择" style="width: 150px;">
                        <Option v-for="(item,index) in allCustomers" :value="item.customer_id" :key="index">{{item.customer_mark}}</Option>
                    </Select>
                </label>
                <label class="filter-item" for="">
                    <span>时间：</span>
                    <DatePicker type="daterange" @on-change="handleChangeDate" split-panels placeholder="Select date" style="width: 200px"></DatePicker> 
                </label>
                <label for="" class="filter-item">
                    <Button type="primary" @click="handleQuery">查询</Button>    
                </label>   
            </div>    
            <div class="echartBox"> 
                <div id="main"  :style="{width:'100%',height:'600px'}"></div>
            </div> 
        </section> 
    </section>
</template>

<script> 
import { mapGetters } from 'vuex'
import  { SERVICE_OPTIONS } from '@/utils/opts'  
import echarts from "echarts" 
export default {
    name: "bandwidth",
    computed: {
        ...mapGetters(['allCustomers', 'bandwidthDatas'])
    }, 
    data(){
        return {
            serviceOptions: SERVICE_OPTIONS,
            filters: {
                customer_id: [],
                service: [],
                domain_id: '',
                date: []
            }
        }
    },
    watch:{
        ['filters.customer_id'](val){
            this.fetchCustomerRelateDomain()
        },
        ['filters.service'](val){
            this.fetchCustomerRelateDomain()
        },
    },
    methods: {
        fetchCustomerRelateDomain(){ 
            let _this = this;
            let condition = {
                params: {
                    customer_id: _this.filters.customer_id,
                    type: _this.filters.service.join(',') 
                },
                cb(_data){ 
                    _this.filters.domain_id = '' 
                }
            }
            _this.$store.dispatch('fetchCustomerRelateDomain', condition);
        },
        handleChangeDate(date){
            this.date = date 
        },
        handleQuery(){
            let 
                _this = this,
                condition = {
                    params: {
                        domain_id: this.filters.domain_id,
                        date: this.filters.date
                    },
                    cb(_data){
                        if(_data.ok){
                            _this.renderCharts()
                        }
                    } 
                }
                            _this.renderCharts()
                _this.$store.dispatch('queryBandwidthData', condition);
        },
        renderCharts(){ 
            let myChart = echarts.init(document.getElementById('main'));

            let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }]
            };
            myChart.setOption(option); 

        }
    },
}
</script>

<style lang="scss">
    .filter-item:not(:first-child){
        margin-left: 20px;
        margin-bottom: 20px;
    }
   .mainContentWrap .filter-item .ivu-tag-text{
        color: #495060!important;
    }
</style>

